<!-- 组件库 -->
<template>
	<a-card
		v-for="cpns in cpnsLibary"
		:key="cpns.name"
		:title="cpns.title"
		:headStyle="{ userSelect: 'none' }">
		<a-card-grid v-for="cpn in cpns.components" style="width: 33.33%; text-align: center">
			<div draggable="true" @mousedown="(e) => handleDragCpn(e, cpn, cpns.name)">
				<template v-if="cpns.name === 'basics'">
					<component style="font-size: 18px;" :is="cpn.icon"></component>
				</template>
				<img
					v-else
					class="meun-image-box"
					:src="getAssetsFile(cpnFileType(cpns.name).value, cpn.type)" />
				<div>{{ cpn.label }}</div>
			</div>
		</a-card-grid>
	</a-card>
</template>
<script setup>
import { computed } from "vue";
import { getAssetsFile } from "@/utils/LowCode/index.js";
const props = defineProps({
    cpnsLibary: {
        type: Array,
        default: () => []
    }
});
const emits = defineEmits(["handleDragCpn"])
const cpnFileType = (name) =>
	computed(() => {
		switch (name) {
			case "border":
				return "borderComponents";
			case "decorate":
				return "decorateComponents";
			case "border":
				return "borderComponents";
		}
	});
//拖拽组件时触发
const handleDragCpn = (e, cpn, type) => {
	emits("handleDragCpn", e, cpn, type);
};
</script>
<style scoped lang="scss">
.meun-image-box {
    width: 50px;
    height: 25px;
    margin-bottom: 5px;
}
</style>
